<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>产品中心</title>
    <link href="css/base.css" type="text/css" rel="stylesheet" />
    <link href="css/product.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <!--顶部-->
        <div class="banner">
            <!--头部-->
            <div class="top">
                <div class="logo"></div>
                <span></span>
                <div class="txt01">
                    <p>专注护肤行业<b>10年</b></p>
                    <p>我们只生产最高品质的护肤产品</p>
                </div>
                <div class="tel">
                    <p>服务咨询热线</p>
                    <b>400-888-2837</b>
                </div>
            </div>
            <!--导航-->
            <div class="nav">
                <div class="nav_bg">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><span></span><a href="product.html?series=0">产品中心</a></li>
                        <li><span></span><a href="brandIdea.html">理念</a></li>
                        <li><span></span><a href="addProduct.html">添加产品</a></li>
                        <li><span></span><a href="search.html">搜索</a></li>
                    </ul>
                    <div class="search">
                        <button class="s01" id="searchProduct" style="background-color: #077c2b; border: none; color: #fff; 
                        padding: 5px 10px; font-size: 14px; font-weight: bold;
                        box-shadow: 0 2px 4px rgba(0,0,0,.2);">产品搜索</button>
                        <input type="text" placeholder="请输入关键字" class="s02" id="searchContent"/><span></span>
                        <button id="login" onClick="logout()" style="background-color: #077c2b; border: none; color: #fff; 
                        padding: 5px 10px; font-size: 14px; font-weight: bold;
                        box-shadow: 0 2px 4px rgba(0,0,0,.2);">
                        退出账号
                    </button>
                        <button id="loginUser" style="cursor: default; background-color: #077c2b; border: none; color: white; height: 25px;"><a href="login.html" style="color: white;">未登录</a></button>
                    </div>
                </div>
            </div>
            <i></i>
        </div>


        <div class="main">
            <h2>当前位置：首页>产品中心</h2>

            <div class="left">
                <div class="title"><span></span>产品中心</div>
                <ul id="seriesItem">
               
                </ul>

                <div class="yin"><img src="images/yin01.png" /> </div>
            </div>


            <div class="right" id="center">
                <div class="title">
                    <p class="curr"><a href="javascript:">{{seriesName}}</a></p>
                </div>
                <div class="line"><b></b><i></i></div>
                <div class="box02">
                    <div class="set01">
                        <ul id="productInfoUl">

                        </ul>
                    </div>             
                </div>
                <div class="num">
                    <!-- 传入跳转页数，跳转首页 -->
                    <b><a @click="clickPage(1,dataPage.maxPage)">首页</a></b>
                    <!-- 传入当前页数，方法计算上一页 -->
                    <b><a @click="prePage(dataPage.currPage)">上一页</a></b>
                    <!-- 通过页数的列表循环页数 -->
                    <div id="pageList" v-for="i in dataPage.nearPage" :key="i">
                        <span :class="{'curr':i===dataPage.currPage+1}"><a
                                @click="clickPage(i,dataPage.maxPage)">{{i}}</a></span>
                    </div>
                    <!-- 传入当前页数和最大页数，方法计算下一页 -->
                    <b><a @click="nextPage(dataPage.currPage,dataPage.maxPage )">下一页</a></b>
                    <!-- 传入最大页数-1就是尾页 -->
                    <b><a @click="clickPage(dataPage.maxPage-1,dataPage.maxPage)">尾页</a></b>
                    <b><input type="text" v-model="jumpPage" style="width:6vh;" />
                    </b>共{{dataPage.maxPage-1}}页
                    <!-- 传入需要跳转的页数和最大也是，方法计算跳转页面 -->
                    <button @click="clickPage(jumpPage,dataPage.maxPage)">跳转</button>
                </div>
            </div>
        </div>


        <!--底部-->
        <div class="bottom">
            <div class="bb">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><span></span><a href="product.html?series=0">产品中心</a></li>
                    <li><span></span><a href="brandIdea.html">理念</a></li>
                    <li><span></span><a href="addProduct.html">添加产品</a></li>
                    <li><span></span><a href="search.html">搜索</a></li>
                </ul>
            </div>
            <p>© 上海化妆品化妆品有限公司版权所有 沪ICP备11049051号</p>
        </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<script src="js/ajax.js"></script>
<script src="js/vue.js"></script>
<script src="./js/userIsLogin.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            id: 0,
            seriesList: [],
            dataPage: {
                total: 0,
                currPage: 0,
                maxPage: 0,
                nearPage: [],
            },
            jumpPage:0,
            productList: [],
            series:0,
            seriesName:"",

        },
        //开始就运行
        created() {
            //获取产品列表
            this.getSeriesList();
            //获取总条数（就是分页的列表）
            this.getProductPage(this.dataPage.currPage);
            //获取分页数据
            this.getPageProductData();
            //通过url的seriesId获取系列名称
            this.getSeriesNameById();
        },
        methods: {
            //获取系列的列表
            getSeriesList() {
                //从url里面获取series的值
                const searchParams = new URLSearchParams(window.location.search);
			    let id = searchParams.get('series');
                ajax.get("/getSeriesList", (data) => {
                    this.seriesList = data.data;
                    // class="${0==id?'curr':""} 这串判断当前当前用户浏览的分类，然后标记
                    var seriesList = `<li class="${0==id?'curr':""}"><a href="product.html?series=0">全部</a></li>`;
                    for (var i = 0; i < this.seriesList.length; i++) {
                        seriesList += `<li class="${this.seriesList[i].id==id?'curr':""}"><a href="product.html?series=${this.seriesList[i].id}">${this.seriesList[i].seriesProduct}</a></li>`;
                    }
                    $("#seriesItem").html(seriesList);
                })
            },
            //获取产品分页
            getProductPage(currPage) {
                //先获取当前分类的id
                const searchParams = new URLSearchParams(window.location.search);
			    let id = searchParams.get('series');
                //调用获取总条数的方法
                ajax.get("/getProductCount?id="+id, (data) => {
                    //总条数
                    this.dataPage.total = data.total;
                    //每页8条，计算出总共有多少也
                    this.dataPage.maxPage = Math.round(data.total / 8) + 1;
                    const half = 3;      //设置 3页前   3页后
                    //设置当前页往前三页
                    let startPage = currPage - half;
                    //设置当前页往后三页
                    let endPage = currPage + half;
                    //判断往后显示的三页页数不能小于1
                    if (startPage < 1) startPage = 1;
                    //判断往后显示的三页不能大于最大页数
                    if (endPage > this.dataPage.maxPage) endPage = this.dataPage.maxPage-1;
                    //这个是装要显示页数的列表
                    this.dataPage.nearPage = [];
                    //把显示的页数循环添加进去
                    for (let i = startPage; i <= endPage; i++) {
                        if (i !== 0 && i !== this.dataPage.maxPage + 1) {
                            this.dataPage.nearPage.push(i);
                        }
                    }
                })
            },
            //获取产品分页数据
            getPageProductData() {
                //先获取url上的系列id
                const searchParams = new URLSearchParams(window.location.search);
			    let id = searchParams.get('series');
                this.series = id;
                //设置post的传参数据
                var jsonData = {
                    currPage: this.dataPage.currPage,
                    series:this.series,
                };
                //通过页数获取产品数据使用 limit进行分页
                ajax.post("/getProductPageInfo", jsonData, (data) => {
                    this.productList = data.data;
                    var dataInfo = "";
                    //循环赋值
                    for (var i = 0; i < this.productList.length; i++) {
                        dataInfo +=
                            `
                        <li>
                            <a href="productxq.html?id=${this.productList[i].id}">
                                <img src="http://127.0.0.1:5501/webItemTest01/BeautyMakeup/images/product/${this.productList[i].imgSrc}"
                                        style="border:solid 1px #d2e0ce;width:23vh;height:23vh;" /><span>${this.productList[i].productName}</span>
                            </a>
                                <p>${this.productList[i].introduction}</p>
                            </li>
                        `;
                    }
                    $("#productInfoUl").html(dataInfo);
                });
            },
            //获取系列名通过id
            getSeriesNameById(){
                //从url获取系列id
                const searchParams = new URLSearchParams(window.location.search);
			    let id = searchParams.get('series');
                //调用请求查找当前的系列名
                ajax.get("/getSeriesNameById?id="+id,(data)=>{
                    console.log(data);
                    if(data.data.length==0){
                        this.seriesName = "全部";
                    }else{
                        this.seriesName = data.data[0].seriesProduct;
                    }
                })
            },
            //上一页
            prePage(currPage) {
                //判断页数是否小于1
                if (currPage < 1) {
                    return
                }
                //当前页数-1
                this.dataPage.currPage = currPage - 1;
                //重新获取当前页的数据
                this.getPageProductData();
                //重新渲染页数栏
                this.getProductPage(currPage - 1);
            },
            //下一页
            nextPage(currPage, maxPage) {
                //判断当前页数不能大于最大页数
                if (currPage >= maxPage - 2) {
                    return
                }
                //当前页数+1
                this.dataPage.currPage = currPage + 1;
                //重新获取当前页数据
                this.getPageProductData();
                //重新获取页数栏数据
                this.getProductPage(currPage + 1);
            },
            //跳转到多少页
            clickPage(page, maxPage) {
                //首先获取当前页数
                page -= 1;
                //传入的页数不能小于0和不能大于最大页数
                if (page < 0 || page >= maxPage - 1) {
                    return
                }
                //设置当前页数为传入页数
                this.dataPage.currPage = page;
                //重新获取分页数据
                this.getPageProductData();
                //重新获取页数栏数据
                this.getProductPage(page);
            },

        },

    });
</script>

</html>